<template>
  <div class="relative" @mouseenter="onMounseEnter" @mouseleave="onMouseleave">
    <div>
      <!-- 具名插槽: 触发弹层的视图 -->
      <slot name="reference"/>
    </div>
  </div>
  <!-- 气泡展示 -->
  <transition name="slide">
    <div v-show="isViable" class="absolute p-1 z-20 bg-white border-rounded-md">
    <!-- 匿名插槽: 弹出层视图中展示的内容 -->
    <slot />
  </div>
  </transition>
 
</template>
<script setup>
import {ref} from 'vue'

const isViable = ref(false)

/**
 * 鼠标移入触发
 */
const onMounseEnter = () => {

}
/**
 * 鼠标移出触发
 */
 const onMouseleave = () => {
  
}
</script>
<style lang="scss" scoped>
 .slide-enter-active,
 .slide-leave-active
 {
    transition: opacity 0.3s,transform 0.3s
  }
  
  .slide-enter-from,
  .slide-leave-to {
    transform: translateY(40px);
    opacity: 0;
  }
</style>